
<template>
  <section>
    <div class="register">
      <router-link :to="{name:'site'}"><span class="glyphicon glyphicon-menu-left pull-left"></span></router-link>
      <span class="register-span">新增地址</span>
    </div>
    <div class="center">
      <input type="text" placeholder="请填写你的姓名" class="form-control" v-model="valueName" @input="getName" :class="{nameColor:nameColor}">
      <p v-if="nameColor">请填写您的姓名</p>
      <input type="text" placeholder="小区/写字楼/学校等" class="form-control" v-model="valueSite" @click="getSite" :class="{nameColor:site}">
      <p v-if="site">请填写您的地址</p>
      <input type="text" placeholder="请填写详细送餐地址" class="form-control" v-model="valueSite1" @input="getSite1" :class="{nameColor:site1}">
      <p v-if="site1">{{site2? '请详细填写送餐地址':'送餐地址太短了，不能辨识'}}</p>
      <input type="text" placeholder="请填写能够联系到您的手机号" class="form-control" v-model="valueNumber" @input="getNumber"  :class="{nameColor:number}">
      <p v-if="number">请输入正确的手机号</p>
      <input type="text" placeholder="备用联系电话(选填)" class="form-control" v-model="valueNumber1" @input="getNumber1" :class="{nameColor:number1}">
      <p v-if="number1">请输入正确的手机号</p>
    </div>
    <div class="div">
      <button class="btn btn-success" @click="toArray" :disabled="$store.state.text">新增地址</button>
    </div>
    <mt-popup v-model="popupVisible" position="center"class="animated bounceIn center-popup" :closeOnClickModal='false' :modal="false">
      <div >
        <i class="iconfont">&#xe604;</i>
        <p class="p">{{content}}</p>
        <button class="btn btn-success" @click="popup">确认</button>
      </div>
    </mt-popup>
  </section>
</template>

<script>
  import Vue from 'vue'
  import { Popup } from 'mint-ui';
  Vue.component(Popup.name, Popup);
  export default {
    name: "increase",
    data(){
      return {
        valueName: this.$store.state.valueName,//名字
        valueSite: this.$store.state.site,//地址
        valueSite1: this.$store.state.valueSite1,//详细地址
        valueNumber: this.$store.state.valueNumber,//手机号
        valueNumber1: this.$store.state.valueNumber1,//备选手机号
        nameColor:'',//p标签中的 请填写您的姓名是否显示
        site:'',//p标签中的 请填写您的地址是否显示
        site1:'',//详细地址: p标签是否显示
        site2:'',//详细地址: p标签中的内容显示哪一个
        number:'',//p标签中的 请输入正确的手机号是否显示
        Number:'',
        number1:'',//备选  p标签中的 请输入正确的手机号是否显示
        popupVisible:false,//弹出框是否显示
        content:'',//改变弹出框的内容
        personID:JSON.parse(localStorage.getItem("personObj")).id,//获取用户id
        personGeohash:this.$store.state.city.geohash,//获取城市经纬度
      }
    },
    methods:{
      getSite(){
        // 判断地址的长度
        if (this.valueSite.length == 0){
          this.site = true
        }else {
          this.site = false
        }
        this.$router.push({name:'searchAddress'})
      },
      getName(){
        // 判断名字的长度
        if (this.valueName.length == 0){
          this.nameColor = true
        }else {
          this.nameColor = false
        }
          this.$store.commit('getName',this.valueName)
      },
      getSite1(){
        // 判断详细地址的长度
        if (this.valueSite1.length == 0 ){
          this.site1 = true
          this.site2 = true
        }else if (this.valueSite1.length < 2) {
          this.site1 = true
          this.site2 = false
        }else if (this.valueSite1.length > 2){
          this.site1 = false
        }
        this.$store.commit('getSite1',this.valueSite1)
      },
      getNumber(){
        // 判断手机号长度
        if (!(/^1(3|4|5|7|8)\d{9}$/.test(this.valueNumber))) {
          this.number = true
          this.$store.commit('button', false)  //没传值
          console.log(1)
        } else {
          this.number = false
          console.log(2)
        }
        this.$store.commit('getNumber',this.valueNumber)
      },
      getNumber1(){
        // 判断备选手机号长度
        if (this.valueNumber1.length == 0) {
          this.number1 = false
        }else {
          if (!(/^1(3|4|5|7|8)\d{9}$/.test(this.valueNumber1))) {
            this.number1 = true
          } else {
            this.number1 = false
          }
        }
        this.$store.commit('getNumber1',this.valueNumber1)
      },
      toArray(){
        // 判断是否弹出提示框
        if (this.valueSite1.length < 2 || this.valueSite.length == 0) {
          this.content =  '详细地址信息错误'
          this.popupVisible = true
        }
        if (this.valueNumber.length == 0) {
          this.content =  '手机号不能为空'
          this.popupVisible = true
        }
        //存储地址信息
        const url = `https://elm.cangdu.org/v1/users/${this.personID}/addresses`;
        this.$http({
          method: 'post',
          url: url,
          withCredentials: true, // 默认false
          data:{
            address: this.valueSite,
            address_detail: this.valueSite1,
            geohash: this.personGeohash,
            name: this.valueName,
            phone: this.valueNumber,
            tag: '家',
            sex: 2,
            poi_type:0,
            phone_bk:this.valueNumber1,
            tag_type:2
          }
        }).then(res=>{
          console.log(res.data)
          if (res.data.status == 1) {
            const obj = {name:this.valueName, site:this.valueSite,site1:this.valueSite1, number:this.valueNumber, number1:this.valueNumber1}
            this.$store.commit('obj',obj)
            console.log(obj)
            this.$store.state.valueName = ''
            this.$store.state.valueSite1 = ''
            this.$store.state.valueNumber = ''
            this.$store.state.valueNumber1 = ''
            this.$router.push({name:'site'})
          }
        })

      },
      popup(){
        // 不显示弹出框
        this.popupVisible = false
      }
    },
    updated(){
      //判断按钮是否可以点击
      if (this.valueName.length != 0 && this.valueSite.length != 0 || this.valueSite1.length != 0 ){
        this.$store.commit('button', false)
      }else {
        // this.text = true
        this.$store.commit('button', true)
      }
    },
    created(){
      console.log(this.personID)
    }
  }
</script>

<style scoped>
  .center-popup{
    position: absolute;
    top: 30%;
    left: 0.25rem;
    text-align: center;
    border-radius: 0.1rem;
    width: 90%;
  }
  .center-popup p{
    font-size: 0.2rem;
    color: #000;
  }
  .center-popup button{
    width: 100%;
    font-size: 0.2rem;
    font-weight: 900;
  }
  .center{
    padding: 0.03rem 0;
    width: 100%;
    margin-top: 0.1rem;
    background-color: white;
  }
  .center input{
    width: 94%;
    margin: 0.1rem auto;
    background-color: #F5F5F5;
  }
  .div{
    width: 100%;
    margin-top: 0.3rem;
    height: 0.4rem;
  }
  .div button{
    width: 96%;
    margin-left: 0.075rem;
    height: 100%;
  }
  p{
    color: red;
    margin-left: .1rem;
    font-size: 0.12rem;
  }
  .nameColor{
    border: 0.01rem solid red;
  }
  .iconfont{
    font-family:"iconfont" !important;
    font-size:1rem;
    font-style:normal;
    color: #F8BB86;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
  }
</style>

